<template>
<div class="main">
  <div class="jumbotron">
    <div class="wh jumbotron-inner">
        <h1>资讯</h1>
        <h4>{{detail.title}}</h4>
    </div>
    <div class="lang">
      <div class="lang_2"></div>
    </div>     
  </div>
	<div class="w path">
  	<span @click="goToPage('/index')">首页 </span>
    <span @click="setCate([item.id])" v-for="item in path" :key ="item.id" >
      <RightOutlined class="path-icon" />
      {{item.cateName}}
    </span>	
	</div>
	<div class="w" style="padding-bottom:20px;">
    <a-row class="list" :gutter="15" >
    <a-col  :xs=24 :sm=24 :md=17 :lg=17 :xl=17>
      <div class="content boxshw">
        <div class="content-head">
          <h1 class="title">{{detail.title}}</h1>
          <div class="content-tip">
            <ClockCircleOutlined /><span class="en">{{createdTime}}</span>
            <UserOutlined /><span class="en">admin</span>
            <span  @click="setLinkNum(detail.id,'2')">
              <LikeOutlined/><span class="en">{{detail.likeNum}}</span>
            </span>
            <EyeOutlined /><span class="en">{{detail.clickNum}}</span>
          </div>         
        </div>
        <div v-if="detail.introduct" class="content-introduct">{{detail.introduct}}</div>	
        <div class="content-main" id="contentMain" v-highlight v-html="detail.content"></div>
      </div>
    </a-col>
    <a-col :xs=0 :sm=0 :md=7 :lg=7 :xl=7 >
      <div class="tree">
        <h4 class="tree-tit">资讯分类</h4>
        <a-tree v-if="treeData.length > 0" style=" padding:0 0 15px 0;" :tree-data="treeData" blockNode @select="setCate" :replaceFields="{title:'cateName',key:'id'}" :expand-on-click-node="false" default-expand-all></a-tree> 
      </div>
      <a-affix :offsetTop="80">
        <div class="tree">	
        <h4 class="tree-tit">内容目录</h4>
        <a-anchor :affix="false" :target-offset="90" :showInkInFixed="true" wrapperClass="anchor-tree">
          <a-anchor-link v-for="(item,index) in anchorLink" :key="index" :href="'#'+index" :title="item" />          
        </a-anchor>
        </div>          
      </a-affix>
    </a-col>  		 		
    </a-row>
	</div>
</div>
</template>

<script>
import axios from "@/global/axios";
import api from "@/global/api";
import { useRouter } from 'vue-router'
import { reactive,toRefs,onMounted ,nextTick,computed } from 'vue'
import {ClockCircleOutlined,UserOutlined,LikeOutlined,EyeOutlined,RightOutlined} from '@ant-design/icons-vue'
export default {
  components: {ClockCircleOutlined,UserOutlined,LikeOutlined,EyeOutlined,RightOutlined},
  setup(){
    const router = useRouter();
    const detailData = reactive({
      treeData:[],
      detail:{},
      path:[],
      anchorLink:[]
    });
    onMounted( async () => {
      let _id = router.currentRoute.value.query.id;
      let _treeData = await axios.get(api.getContentCate);
      detailData.treeData = _treeData.data;
      let _detail = await axios.post(api.getContentDetail,{id:_id});
			detailData.detail = _detail.data;
			detailData.path = _detail.data.path;
      nextTick (()=>{
        setAnchorLink();
      })      
    });
    const setAnchorLink = () => {
      var _anchorDom = document.getElementById('contentMain').getElementsByTagName('h3');
      var _anchorLink = [];
      _anchorDom.forEach( (item,index)=>{
        item.id = index;
        _anchorLink.push(item.innerText)	
      })
      detailData.anchorLink = _anchorLink;
    };
    const createdTime = computed( ()=>{
      var paddingStr = function (_str) {
        return _str.length == 1 ? "0" + _str : _str
      }
      var _curDate = new Date(detailData.detail.created);	
      var _YY = _curDate.getFullYear();
      var _MM = paddingStr(_curDate.getMonth() + 1 + '');
      var _DD = paddingStr(_curDate.getDate() + '');
      return `${_YY}-${_MM}-${_DD}`	
    });    
		const setCate = async (keys) => {
			let curCateId = keys && keys.length > 0 ? keys[0] : '';	
			router.push({name:'list',params:{cateId:curCateId}})		
		};
    return {
      ...toRefs(detailData),
      createdTime,
      setCate
    }      
  }
}
</script>
<style scoped>
.path{ height:30px; line-height:30px; font-size:16px;}
.path .path-icon{ font-size:12px; color:#666;}
.path span{ cursor:pointer;}
.jumbotron { margin: 0 0 20px 0; color: #fff; position:relative; height:190px; background:#2EA7E0 url(../assets/banner.png) no-repeat right 0; }
.jumbotron-inner{ height:190px; background:; background-size:contain;}
.lang {overflow:hidden;width:100%; position:absolute;left:0;opacity:.58;bottom:0;}
.lang_1 {background:url(../assets/banner-b.png) repeat-x;width:4500px;height:60px;animation:langs 12s infinite linear;position:absolute;top:0;}
.lang_2 {background:url(../assets/banner-t.png) repeat-x;width:4500px;height:55px;animation:langs 18s infinite linear;position:relative;top:0;}
@keyframes langs {0% {margin-left:0}
100% {margin-left:-1938px}
}
@-webkit-keyframes langs {0% {margin-left:0}
100% {margin-left:-1938px}
}
.jumbotron h1{ font-size:40px; font-weight:normal; margin:40px 0 20px 0; padding:0;}
.jumbotron h4{ font-weight:normal; margin:0; font-size:15px; letter-spacing:1px;}
.list{ margin-bottom:20px;}
.content{background-color: #fff; padding:15px 20px 25px; margin:15px 0;  position:relative;}
.content-head{  margin-bottom:15px;}
.content-head h1{ font-size:22px;   margin: 15px 0 ;}
.content-tip{ margin-bottom:15px; color:#999; padding-bottom:20px; border-bottom:1px solid #EFEFEE}
.content-tip >>> svg{ cursor:pointer; margin-right:5px; font-size:14px;}
.content-tip span.en{ cursor:pointer; margin-right:20px;}
.content-introduct{ line-height:1.8; color:#0093FF; text-indent:32px; font-size:16px; background:#E1F8FF; padding:10px; margin-bottom:12px;}

.content-main{ line-height:2; font-size:15px;  }
.content-main >>> h3{ margin:8px 0;  font-size:18px;}
.content-main >>> code{ font-family:"Courier New", Courier, monospace; line-height:1.4; font-size:16px;}
.content-main >>> .language-bash .hljs-comment{ position:absolute; left:40%;}
.content-main >>> p{ margin-bottom:10px;}
.content-main >>> .link{color: #b2b2b2;  overflow:auto; white-space:nowrap; background:#F7F7F7; font-size:14px; padding-left:10px; border-left: 4px solid #ebebeb; line-height:35px;}
.content-main >>> .link a{ color:#2EA7E0;  font-family:"Courier New", Courier, monospace;}
.content-main >>> .link a:hover{text-decoration:underline;}
.tree{ background:#fff; margin-top:15px; box-shadow: 2px 2px 3px #ccc; padding-left:8px; overflow:hidden;}
.tree-tit{ height:50px; margin:0; line-height:52px; padding-left:20px; overflow:hidden; font-size:16px; border-bottom:1px solid #EFEFEE;}
.tree >>> .ant-tree-switcher{ margin:8px 0 0 0;} 
.tree >>> .ant-tree-treenode-switcher-open{ overflow:hidden;}
.tree >>> .ant-tree-node-content-wrapper{ transition:all 0.1s; border:0; height:35px;  line-height:35px; border-radius:0; padding:0 0 0 8px !important; overflow:hidden !important; width:100%; margin:0;}
.tree >>> .ant-tree li{ padding:0;} 
.tree >>> .anchor-tree{ padding: 30px;}
</style>